<template>
  <div class="data-table" :style="{ width: width + 'px', height: height + 'px' }">
    <div class="table-header">
      <h3 class="table-title">{{ title }}</h3>
    </div>
    <div class="table-content">
      <table class="table">
        <thead>
          <tr>
            <th v-for="column in columns" :key="column.prop" class="table-header-cell">
              {{ column.label }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, rowIndex) in displayData" :key="rowIndex" class="table-row">
            <td v-for="column in columns" :key="column.prop" class="table-cell">
              <span v-if="column.prop === 'status'" class="status-badge" :class="getStatusClass(row[column.prop])">
                {{ row[column.prop] }}
              </span>
              <span v-else>{{ row[column.prop] }}</span>
            </td>
          </tr>
        </tbody>
      </table>
      
      <!-- 空状态 -->
      <div v-if="displayData.length === 0" class="empty-state">
        <i class="el-icon-document"></i>
        <p>暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Column {
  prop: string
  label: string
}

interface Props {
  width?: number
  height?: number
  title?: string
  columns?: Column[]
  data?: any[]
}

const props = withDefaults(defineProps<Props>(), {
  width: 400,
  height: 300,
  title: '数据表格',
  columns: () => [
    { prop: 'name', label: '名称' },
    { prop: 'status', label: '状态' },
    { prop: 'time', label: '时间' }
  ],
  data: () => [
    { name: '设备A', status: '正常', time: '24小时' },
    { name: '设备B', status: '警告', time: '18小时' },
    { name: '设备C', status: '故障', time: '2小时' }
  ]
})

// 计算属性
const displayData = computed(() => {
  return props.data.slice(0, 5) // 限制显示行数
})

// 方法
const getStatusClass = (status: string) => {
  const statusMap: Record<string, string> = {
    '正常': 'status-normal',
    '警告': 'status-warning',
    '故障': 'status-error',
    '离线': 'status-offline'
  }
  return statusMap[status] || 'status-default'
}
</script>

<style lang="scss" scoped>
.data-table {
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  
  .table-header {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
    
    .table-title {
      margin: 0;
      font-size: 14px;
      font-weight: 500;
      color: #303133;
    }
  }
  
  .table-content {
    height: calc(100% - 60px);
    overflow: hidden;
    position: relative;
    
    .table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      
      .table-header-cell {
        padding: 8px 12px;
        background: #f5f7fa;
        border-bottom: 1px solid #e4e7ed;
        font-weight: 500;
        color: #303133;
        text-align: left;
      }
      
      .table-row {
        &:hover {
          background-color: #f5f7fa;
        }
        
        .table-cell {
          padding: 8px 12px;
          border-bottom: 1px solid #f0f0f0;
          color: #606266;
          
          .status-badge {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 11px;
            font-weight: 500;
            
            &.status-normal {
              background-color: #f0f9ff;
              color: #67C23A;
            }
            
            &.status-warning {
              background-color: #fdf6ec;
              color: #E6A23C;
            }
            
            &.status-error {
              background-color: #fef0f0;
              color: #F56C6C;
            }
            
            &.status-offline {
              background-color: #f4f4f5;
              color: #909399;
            }
            
            &.status-default {
              background-color: #f0f0f0;
              color: #606266;
            }
          }
        }
      }
    }
    
    .empty-state {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: #909399;
      
      i {
        font-size: 32px;
        margin-bottom: 8px;
        opacity: 0.6;
      }
      
      p {
        margin: 0;
        font-size: 12px;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .data-table {
    .table-content {
      .table {
        font-size: 11px;
        
        .table-header-cell,
        .table-cell {
          padding: 6px 8px;
        }
      }
    }
  }
}
</style> 